<template>
    <view class="notice">
        <view v-if="[7, 8].includes(state.activityType)" @click="openActivityDialog" class="detail_list">
            <view class="detail_line">
                <text class="detail_text">活动</text>
                <view class="detail_value activity">
                    <text class="tag">满减</text> <text class="text">{{ state.activityDesc }}</text>
                </view>
            </view>
            <view class="img_content">
                <image class="img_icon" :src="rightarrow1"></image>
            </view>
        </view>
        <view v-if="state.couponContent && state.discountRepeat != 1" @click="onSelectCouponDialog" class="detail_list">
            <view class="detail_line">
                <text class="detail_text">优惠券</text>
                <text class="coupon_title">{{ state.couponContent }}</text>
            </view>
            <view class="img_content">
                <image class="img_icon" :src="rightarrow1"></image>
            </view>
        </view>
        <view class="detail_list" @click="onSelectSkuDialog">
            <view class="detail_line">
                <text class="detail_text">规格</text><text class="detail_value">{{ props.skuInformation }}</text>
            </view>
            <view class="img_content">
                <image class="img_icon" :src="rightarrow1"></image>
            </view>
        </view>
        <view class="space_between" @click="onServePopupShow">
            <view class="detail_line">
                <view class="detail_text">服务</view>
                <view class="detail_value">{{ state.serviceInfo }}</view>
            </view>
            <view class="img_content">
                <image class="img_icon" :src="rightarrow1"></image>
            </view>
        </view>
    </view>
</template>

<script setup>
import { getImgOssUrl } from '@/commons/utils';
import { computed } from 'vue';

const props = defineProps({
    data: { type: Object, default: () => ({}) },
    skuInformation: { type: String, default: '' }
});
const emit = defineEmits(['openSkuDialog', 'openCouponDialog']);
const rightarrow1 = getImgOssUrl('/ui-prod-2.0.0/rightarrow1.1.png');
const state = computed(() => props.data);
// 快递发货弹窗
const onServePopupShow = () => {
    emit('openServePopup');
};
// 查看活动详情
const openActivityDialog = () => {
    emit('openActivityDialog');
};
// 选择规格
const onSelectSkuDialog = () => {
    emit('openSkuDialog');
};
// 选择优惠券
const onSelectCouponDialog = () => {
    emit('openCouponDialog');
};
</script>

<style lang="scss" scoped>
.notice {
    margin-top: 18rpx;
    padding: 29rpx;
    padding-bottom: 0;
    background-color: #ffff;
    .detail_line {
        display: flex;
        margin-bottom: 58rpx;
    }
    .space_between {
        display: flex;
        justify-content: space-between;
    }
    .img_icon {
        width: 10rpx;
        height: 18rpx;
    }
    .detail_text {
        flex-shrink: 0;
        font-size: 29rpx;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #999999;
        line-height: 40rpx;
        min-width: 120rpx;
    }
    .coupon_title {
        font-size: 29rpx;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #fe292b;
        line-height: 40rpx;
        white-space: nowrap;
        overflow: hidden;
        max-width: 500rpx;
        text-overflow: ellipsis;
    }
    .activity {
        display: flex;
        align-items: center;
    }
    .detail_value {
        font-size: 29rpx;
        font-weight: 400;
        color: #333333;
        line-height: 40rpx;
        word-break: break-all;
        .tag {
            padding: 4rpx;
            margin-right: 4rpx;
            background: #fe292b;
            border-radius: 4px;
            font-size: 22rpx;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: #ffffff;
            line-height: 22rpx;
        }
        .text {
            font-size: 29rpx;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #fe292b;
        }
    }
    .detail_list {
        display: flex;
        justify-content: space-between;
        // margin-top: 12rpx;
        .img_content {
            vertical-align: middle;
            padding-left: 50rpx;
        }
        button {
            align-items: center;
            line-height: 50rpx;
            margin: 0;
            border-radius: 26rpx;
            border: 2rpx solid #fe292b;
            color: #fe292b;
            font-size: 26rpx;
            font-weight: 400;
            flex-shrink: 0;
            margin-left: 16rpx;
        }
    }
}
</style>
